<template>
	<div class="calendar-container">
		<lilo-calendar 
			:default-selected-dates="defaultSelectedDates" 
			:current-date="currentDate" 
			:start-of-week="startOfWeek"
			:cell-height="cellHeight"
			:can-select="canSelect"
			@date-selected="dateSelected">
			<!-- <template #title> -->
				<!-- 标题栏可以设置插槽 -->
				<!-- <div class="custom-title">2023-08</div> -->
			<!-- </template> -->
		</lilo-calendar>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultSelectedDates: [ '2023-08-01', '2023-08-03' ], //默认选中的日期
				currentDate: '2023-08', //当前月份
				startOfWeek: 1, //从星期几开始,
					// 1: '一',
					// 2: '二',
					// 3: '三',
					// 4: '四',
					// 5: '五',
					// 6: '六',
					// 0: '日'
				cellHeight: '50px', //日期单元的高度
				canSelect: true //是否可以选中，选中之后触发date-selected事件
			}
		},
		methods: {
			dateSelected(val) {
				console.log(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar-container {
		padding: 20px;
		width: 400px;
		.custom-title {
			width: 100%;
			padding: 8px;
			color: #409eff;
			font-weight: bold;
			font-size: 1.1rem;
			border-bottom: 1px solid #0000001f;
		}
	}
</style>